<template>
  <div style="height:100vh;background: #e8e8e8;">
    <div class="title">我有想法</div>
    <van-form
    id="detail"
      @submit="onSubmit"
      style="background: rgb(232, 232, 232);"
    >
      <van-field
        v-model="type"
        name="类型"
        :disabled="disabled"
        label="类型"
        placeholder="类型"
        :rules="[{ required: true, message: '请填写类型' }]"
      />

      <van-field
        name="switch"
        label="匿名"
      >
        <!-- <template #input> -->
        <van-switch
          slot="input"
          :disabled="ifdisabled"
          v-model="isAnonymous"
          size="20"
        />
        <!-- </template> -->
      </van-field>
      <van-field
        v-model="userName"
        name="姓名"
        v-if="!isAnonymous"
        :disabled="true"
        label="投诉人姓名"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="userName"
        name="姓名"
        v-if="isAnonymous"
        type="password"
        :disabled="true"
        label="投诉人姓名"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="mobile"
        type="tel"
        :disabled="true"
        label="联系方式"
        v-if="!isAnonymous"
        placeholder="联系方式"
        :rules="[{ required: true, message: '请填写联系方式' }]"
      />
      <van-field
        v-model="mobile"
        type="password"
        :disabled="true"
        v-if="isAnonymous"
        label="联系方式"
        placeholder="联系方式"
        :rules="[{ required: true, message: '请填写联系方式' }]"
      />
      <van-field
        v-model="gettime"
        :disabled="true"
        label="反馈日期"
        placeholder="反馈日期"
      />
      <van-field
        v-if="ifdisabled"
        v-model="feedbackSystem"
        :disabled="true"
        label="反馈平台"
        placeholder="反馈平台"
      />
      <van-field
        readonly
         v-if="!ifdisabled"
        clickable
        name="picker"
        :value="feedbackSystem"
        label="反馈平台"
        @blur="onBlur"
        placeholder="反馈平台"
        @click="showTable = true"
      />

      <van-popup
        v-model="showTable"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="tableList"
          value-key="name"
          @confirm="onConfirmTable"
          @cancel="showTable = false"
        />
      </van-popup>
      <van-field
        v-model="elseTable"
        v-if="ifElseTable"
        :disabled="ifdisabled"
        @blur="onBlur"
        label="其他平台说明"
        placeholder="其他平台说明"
      />
      <van-field
        v-model="informerCode"
        label="账号名称"
        :disabled="ifdisabled"
        placeholder="旺旺号/微信号/抖音号/小红书号等"
      />
       <van-field
        v-if="ifdisabled"
        v-model="brandName"
        :disabled="true"
        label="涉及品牌"
        placeholder="涉及品牌"
      />
      <van-field
        readonly
         v-if="!ifdisabled"
        clickable
        name="picker"
        :value="brandName"
        label="涉及品牌"
        @blur="onBlur"
        placeholder="涉及品牌"
        @click="showBrand = true"
      />

      <van-popup
        v-model="showBrand"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="brandList"
          value-key="name"
          @confirm="onConfirmBrand"
          @cancel="showBrand = false"
        />
      </van-popup>
      <van-field
        name="uploader"
        label="首页截图"
      >
        <template #input>
          <!-- <van-uploader
            v-model="fileList"
            :disabled="ifdisabled"
            :after-read="afterRead"
            multiple
            class="upload"
            :max-count="1"
          /> -->
        <div style="width:100%">
           <JImageUpload style="display:flex;flex-wrap: wrap;width:100%" :uploadParams="getUploadParams()" :accept="'image/*'" @fileChange="fileXcxImageChange" v-model="fileList"></JImageUpload>
        </div>
        </template>
      </van-field>
      <!-- :rules="[{ required: true, message: '请上传货源信息' }]" -->
      <van-field
        name="uploader"
        label="货源信息"
      >

        <!-- <template #input>
          <van-uploader
          :disabled="ifdisabled"
            v-model="fileList2"
            :after-read="afterRead2"
            multiple
          />
        </template> -->
       

       <template #input> 
        <div style="width:100%">
           <JImageUpload style="display:flex;flex-wrap: wrap;width:100%" :uploadParams="getUploadParams()" :isMultiple="true" :number="5" @fileChange="fileChange" v-model="fileList2"></JImageUpload> 
        </div>
        </template>
       
      </van-field>
      <van-field
        v-model="minPriceInfo"
        @blur="onBlur"
        rows="2"
        autosize
        :disabled="ifdisabled"
        label="销售说明"
        type="textarea"
        class="info"
        maxlength="500"
        placeholder="销售说明"
        show-word-limit
      />

      <van-field
        v-model="content"
        rows="4"
        autosize
        label="内容"
        :disabled="ifdisabled"
        @blur="onBlur"
        type="textarea"
        maxlength="500"
        placeholder="内容"
        show-word-limit
      />
      <div style="margin: 16px;">
        <van-button
          round
          block
          v-if="!ifdisabled"
          type="info"
          native-type="submit"
        >提交</van-button>
      </div>
    </van-form>
      <div class="next">

          <van-list>
            <van-cell
              v-for="item in list.feedBackReplyList"
              :key="item.id"
            >
              <van-row
                type="flex"
                justify="end"
                style="border-bottom: 1px solid #dcdfe6;margin-bottom: 10px;"
              >
                <van-col
                  :span="6"
                  style="color: #faad14;text-align: end;"
                >
                  No:{{item.id}}
                </van-col>
              </van-row>
              <van-row class="row2">
                时间:{{item.createTime}}
              </van-row>
              <van-row class="row2">
                处理部门:{{item.deparmentName}}
              </van-row>
              <van-row class="row2">

                <span v-if="item.rType == 'A'">
                  回复状态:受理人
                </span>
                <span v-if="item.rType == 'Q'">
                  回复状态:举报人
                </span>
              </van-row>
              <van-row
                class="row2"
                v-if="item.mainStatus"
              >
                <span v-if="item.mainStatus == 0">
                  受理状态:处理中
                </span>
                <span v-if="item.mainStatus == 1">
                  受理状态:已处理
                </span>
              </van-row>
              <van-row class="row2">
                回复内容:{{item.rcontent}}
              </van-row>
            </van-cell>
          </van-list>

        </div>
  </div>

</template>
<script>
import { Notify } from 'vant'
import { axios } from '@/utils/request'
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import globalData from '@/assets/js/common'

export default {
   components: {
    JImageUpload
  },
  data() {
    return {
      userName: this.$route.query.userName ? this.$route.query.userName : '',
      mobile: this.$route.query.mobile ? this.$route.query.mobile : '',
      id: this.$route.query.id ? this.$route.query.id : '',
      status: this.$route.query.status ? this.$route.query.status : '',
      replyStatus: this.$route.query.replyStatus ? this.$route.query.replyStatus : '',
      type: '',
      isAnonymous: false,
      content: '',
      elseTable: '',
      ifElseTable: '',
      informerCode: '',
      minPriceInfo: '',
      brandName: '',
      newLifePhotos:[],
      brandList: ['JNBY', '速写', 'jnbybyJNBY', 'LESS', '蓬马', 'JNBYHOME', 'APN', '其他'],
      showBrand: false,
      showTable: false,
      feedbackSystem: '',
      disabled: false,
      list:{},
      ifdisabled:false,
      tableList: ['淘宝（含天猫/1688/闲鱼）', '微信（含小程序)', '小红书', '抖音', '微博', '其他'],
      gettime: '',
      fileList: [],
      fileList2: [],
      productInfoList: [],
      indexPic: ''
    }
  },
  computed: {
    linkId() {
      return localStorage.getItem('linkId')
    }
  },
  created: function () {
    document.title = '员工反馈'
    this.type = '线上非授权销售投诉'
    if (this.id) {
      this.getDetail()
       this.disabled = true
      if(this.status != '处理中' || this.replyStatus == '驳回'){
         this.ifdisabled = true
      }
    }
    setInterval(this.getTime, 500)
  },
  mounted() {},
  methods: {
    onBlur() {
      window.scroll(0, 0)
    },
    getTime() {
      var _this = this
      let yy = new Date().getFullYear()
      var mm = new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      var dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      _this.gettime = yy + '-' + mm + '-' + dd
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      const formData = new FormData()
      formData.append('file', file.file)
      const apiBaseUrl = window._CONFIG['domianURL'] || '/jeecg-boot'
      try {
        axios({
          url: apiBaseUrl + '/api/gateway/basemgt-feedback/feedback/upload2Qny',
          method: 'post',
          data: formData,
          contentType: false
          // headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq' }
        }).then(res => {
          if (res.code == 200) {
            this.indexPic = res.data.url
          } else {
            file.status = 'failed'
            file.message = '上传失败'
            if (res.msg) {
              this.$toast('图片上传失败！' + res.msg)
            }
          }
        })
      } catch (error) {}
    },
    afterRead2(file) {
      // 此时可以自行将文件上传至服务器
      const formData = new FormData()
      formData.append('file', file.file)
      const apiBaseUrl = window._CONFIG['domianURL'] || '/jeecg-boot'
      try {
        axios({
          url: apiBaseUrl + '/api/gateway/basemgt-feedback/feedback/upload2Qny',
          method: 'post',
          data: formData,
          contentType: false
          // headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq' }
        }).then(res => {
          if (res.code == 200) {
            this.fileList2.map(item => {
              if (item.content == file.content) {
                item.url = res.data.url
              }
            })
          } else {
            file.status = 'failed'
            file.message = '上传失败'
            if (res.msg) {
              this.$toast('图片上传失败！' + res.msg)
            }
          }
        })
      } catch (error) {}
    },
    fileChange(list) {
      this.newLifePhotos = list
    },
    fileXcxImageChange(list) {
      console.log(list);
      this.indexPic = list[0].url
    },
    onConfirmTable(value) {
      this.feedbackSystem = value
      this.showTable = false
      if (value == '其他') {
        this.ifElseTable = true
      } else {
        this.ifElseTable = false
      }
      // this.area = value.id
    },
    onConfirmBrand(value) {
      this.brandName = value
      this.showBrand = false
    },
     getUploadParams() {
      return { ...globalData.uploadParams }
    },
    onSubmit(values) {
      console.log('submit', values)
      if (!this.feedbackSystem) {
        this.$toast('请选择反馈平台')
      } else if (!this.elseTable && this.ifElseTable) {
        this.$toast('请选择其他平台说明')
      } else if (!this.informerCode) {
        this.$toast('请填写账号名称')
      } else if (!this.brandName) {
        this.$toast('请选择涉及品牌')
      } else if (!this.indexPic) {
        this.$toast('请上传首页截图')
      } else if(!this.newLifePhotos.length){
        this.$toast('请上传货源信息')
      }else if (!this.minPriceInfo) {
        this.$toast('请输入销售说明')
      } else if (!this.content) {
        this.$toast('请输入内容')
      } else {
        this.newLifePhotos.map(item => {
          this.productInfoList.push(item.url)
        })
        const params = {
          linkId: this.linkId,
          type: 4,
          isAnonymous: values.switch ? 1 : 0,
          userName: this.userName,
          mobile: this.mobile,
          content: this.content,
          feedbackDate: this.gettime,
          feedbackSystem: this.feedbackSystem,
          elseTable: this.elseTable,
          informerCode: this.informerCode,
          brandName: this.brandName,
          indexPic: this.indexPic,
          minPriceInfo: this.minPriceInfo,
          productInfoList: this.productInfoList
        }
        if (this.id) {
          params.id = this.id
        }
        const api = this.id ? '/api/gateway/basemgt-feedback/feedback/update' : '/api/gateway/basemgt-feedback/feedback/save'
        this.$http({
          url: api,
          method: 'post',
          data: params
        }).then(data => {
          if (data.code == 200) {
            Notify({ type: 'success', message: '提交成功！' })
            this.$router.go(-1)
          } else {
            Notify({ type: 'warning', message: data.msg })
          }
        })
      }
    },
    getDetail() {
      const params = {
        id: this.id
      }
      try {
        this.$http({
          url: '/api/gateway/basemgt-feedback/feedback/getFeedbackReplyDetail',
          method: 'get',
          params: params
        }).then(res => {
          if (res.code == 200) {
            this.type = '线上非授权销售投诉'
            this.list = res.data
            this.userName = res.data.userName
            this.mobile = res.data.mobile
            this.indexPic = res.data.indexPic
            this.minPriceInfo = res.data.minPriceInfo
            this.isAnonymous = res.data.isAnonymous == 0 ? false : true
            this.brandName = res.data.brandName
            this.content = res.data.content
            this.fileList = res.data.indexPic
            this.fileList2 = res.data.productInfoList
            this.feedbackSystem = res.data.feedbackSystem
            this.informerCode = res.data.informerCode
          } else {
            Notify({ type: 'warning', message: data.msg })
          }
        })
      } catch (error) {
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style scoped>
.title {
  text-align: center;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
}
.upload::after {
  content: '*填写说明：ID需露出';
  color: red;
  font-size: 12px;
}
.info::after {
  content: '*填写说明：售卖品牌、货季、折扣等';
  color: red;
  font-size: 12px;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
</style>
<style>
#detail .van-field--disabled .van-field__label{
  color: #646566;
}
</style>